<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '提现',
  },
}
</route>
<template>
  <div class="income-page">
    <div class="tips">
      为了您的账户安全，需要向您账号绑定的手机发送验证码。请注意短信接收。若您需要更换手机号，请查看帮助
    </div>
    <div class="model">
      <wd-input v-model="mode.phone" size="large" disabled use-suffix-slot>
        <template #suffix>
          <div class="code active" @click="sendCode(true)">
            {{ second > 0 ? `${second}s后再试` : '获取验证码' }}
          </div>
        </template>
      </wd-input>
      <wd-input v-model="mode.code" size="large" placeholder="请输入验证码" type="number" />

      <button
        class="custom-button button"
        :class="{ disabled: mode.code == '' }"
        @click="redirect('/pages-sub/income/success')"
      >
        短信验证码验证
      </button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { redirect } from '@/utils/page'

const mode = reactive({
  phone: '138****8888',
  code: '',
})

// 下拉刷新
const second = ref(0)
function sendCode(click = false) {
  if (click && second.value > 0) {
    return
  }
  if (second.value === 0) {
    second.value = 60
    setTimeout(sendCode, 1000)
  } else {
    second.value--
    if (second.value > 0) {
      setTimeout(sendCode, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
.income-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 28rpx 30rpx;
  background-color: var(--bgc4);

  .tips {
    margin: 30rpx 0 60rpx;
    font-size: 23rpx;
    color: var(--color4);
  }

  .model {
    padding: 30rpx;
    margin-bottom: 28rpx;
    background-color: #fff;
    border-radius: 30rpx 30rpx 40rpx;
    --wot-input-not-empty-border-color: #e6ecf0;
    --wot-input-border-color: #e6ecf0;

    .code {
      padding: 8rpx 10rpx;
      font-size: 23rpx;
      color: var(--color1);
      border: 1rpx solid var(--color1);
      border-radius: 10rpx;
    }

    .button {
      width: 374rpx;
      margin: 80rpx auto 20rpx;
      font-weight: 500;
    }
  }
}
</style>
